<template>
  <el-collapse v-model="active_name">
    <el-collapse-item v-for="row in list" :name="row.id">
      <template #title >
        <div class="refund_log-title">
          <p>{{row.create_time}}</p>
          <p>{{row.status_alias}}</p>
        </div>
      </template>
      <div class="refund_log-row"><p>退款金额</p> <p>￥{{row.refund_money}}</p></div>
      <div class="refund_log-row"><p>退款模式</p> <p>{{row.need_deliver?'退货退款':'仅退款'}}</p></div>
      <div class="refund_log-row"><p>退款方式</p> <p>{{row.pay_type_alias}}</p></div>
      <div class="refund_log-row"><p>退款理由</p> <p>{{row.reason_user}}</p></div>
      <div class="refund_log-row"><p>管理员备注</p> <p>{{row.reason_admin}}</p></div>
      <div class="refund_log-row" v-if="row.action_time"><p>审核时间</p> <p>{{row.action_time}}</p></div>
      <div class="refund_log-row" v-if="row.refund_time"><p>退款时间</p> <p>{{row.refund_time}}</p></div>
      <h3 v-if="Object.keys(row.refund_return_map).length">发起退款记录</h3>
      <div class="refund_log-row" v-for="(v,k) in row.refund_return_map"><p>{{ k }}</p> <p class="text-back">{{v}}</p></div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  props: ['__iframe'],
  data(){
    let id = this.$get('id');
    let model = {name:this.$get('model_name'), alias:this.$get('model_alias','')};
    if (!id || !model.name) iframe.remove('refund_log');
    return {
      id: id,
      model: model,
      active_name: [],
      list: [],
    }
  },
  methods:{
    get_url(){
      let param = { 'where[model_order_id][eq]': this.id }
      let model_id = this.$get('model_id');
      if (model_id){
        param['where[model_id][eq]'] = model_id;
      }else{
        param['where[model_name][eq]'] = this.model.name;
      }
      return '/admin/order_refund/list?'+s94Mjs.param_encode(param)
    },
    get_list(){
      this.list = [];
      this.active_name = [];
      if (!this.id || !this.model.name) return;
      let status_alias_map = this.admin_config('status_alias_map.order_refund.status');
      let pay_type_alias_map = this.admin_config('status_alias_map.order_refund.pay_type');
      let url = this.get_url();
      ajax({url: url, cache:true}, (res)=>{
        let data = res.data;
        this.active_name = [data.list[0].id];
        data.list.forEach(function (v){
          v.refund_return_map = v.refund_return ? JSON.parse(v.refund_return) : {};
          for (const k in v.refund_return_map) {
            let v2 = v.refund_return_map[k];
            v.refund_return_map[k] = typeof(v2)=='string' ? v2 : JSON.stringify(v2)
          }
          v.status_alias = status_alias_map[v.status];
          v.pay_type_alias = pay_type_alias_map[v.pay_type];
        })
        this.list = data.list;
        return false;
      }, ()=>{
        iframe.remove('refund_log');
      })
    }
  },
  mounted() {
    this.get_list()
  }
}
</script>

<style scoped>
.refund_log-title{display: flex;justify-content: space-between;font-size: 1.2em;font-weight: bold;width: 100%;padding: 0 10px;}
.refund_log-row{display: flex;width: 100%;padding: 10px;border-bottom: 1px solid #ddd;}
.refund_log-row>p:first-child{width: 140px;text-align: left;padding-right: 10px;flex-shrink: 0;}
.text-back{word-wrap: break-word;overflow: hidden;}
</style>